<!--
  功能：功能描述
  作者：zzb
  邮箱：2283325110@qq.com
  时间：2021年12月15日 14:23:54
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <el-card class="card-linechart">
    <div id="linechart"></div>
  </el-card>
</template>

<script>
  import * as echarts from 'echarts'
  import { getOtherData } from '@/api/other'
  var option = {
    title: {
      text: '全国疫情新增趋势',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      right: '20px',
      data: ['确诊', '疑似'],
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: 'value',
      data: ['0', '20', '40', '60', '80', '100', '120', '140'],
    },
    series: [
      {
        name: '确诊',
        type: 'line',
        data: [],
      },
      {
        name: '疑似',
        type: 'line',
        data: [],
      },
    ],
  }
  export default {
    // 组件名称
    name: 'LineChart',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
      return {
        chinaDayList: [],
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 以下是生命周期钩子
    /**
     * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
     */
    created() {},
    /**
     * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
     * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
     */
    mounted() {
      this.getData()
      this.myChart = echarts.init(document.getElementById('linechart'))
      this.myChart.setOption(option)
    },
    // 组件方法
    methods: {
      async getData() {
        const { data } = await getOtherData(
          'https://c.m.163.com/ug/api/wuhan/app/data/list-total'
        )
        this.chinaDayList = data.data.chinaDayList
        option.series[0].data = []
        option.series[1].data = []
        option.xAxis.data = []
        this.chinaDayList.forEach((item, index) => {
          option.xAxis.data.push(item.date)
          option.series[0].data.push(item.today.confirm)
          option.series[1].data.push(item.today.suspect)
        })
        this.myChart.setOption(option)
        // this.$axios
        //   .get('/wuhan/app/data/list-total')
        //   .then((res) => {
        //     this.chinaDayList = res.data.data.chinaDayList
        //     option.series[0].data = []
        //     option.series[1].data = []
        //     option.xAxis.data = []
        //     this.chinaDayList.forEach((item, index) => {
        //       option.xAxis.data.push(item.date)
        //       option.series[0].data.push(item.today.confirm)
        //       option.series[1].data.push(item.today.suspect)
        //     })
        //     this.myChart.setOption(option)
        //   })
        //   .catch((err) => {
        //     console.error(err)
        //   })
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
  .card-linechart {
    float: left;
    width: 500px;
  }
  #linechart {
    width: 100%;
    height: 400px;
  }
</style>
